<template>

	<van-tabbar v-model="active.num"  inactive-color="#000" @change="onChange" placeholder >
		<van-tabbar-item icon="wap-home-o">首页</van-tabbar-item>
		<van-tabbar-item icon="bar-chart-o">数据展示</van-tabbar-item>
		<van-tabbar-item icon="friends-o">工单</van-tabbar-item>
		<van-tabbar-item icon="user-circle-o">我的</van-tabbar-item>
	</van-tabbar>
</template>

<script setup>
import {showNotify} from "vant";
import {useStore} from 'vuex';
import {useRouter} from 'vue-router'
import {onMounted, reactive} from 'vue'

const router = new useRouter();
const store = new useStore();

const active = reactive({
    num: 0
})

onMounted(()=>{
    // console.log('tabBar - mounted')
    active.num = parseInt(store.state.currentPage.active)             //从vuex取出，上一次被点击的标签的id，赋值给当前激活的标签
    // console.log('active ',typeof active.num)
})
function onChange(index){
    // showNotify({
    //     type: 'primary',
    //     message: index,
    //     background: '#ffe1e1',
    //     position: 'top',
    //     duration: 1000,
    // });
    store.commit("setActiveNumber",index);
    //console.log(index);
    switch(index){
        case 0:
            router.push({path:'/'});
            break;
        case 1:
            router.replace({name:'GraphicIndex'});
            break;
        case 2:
            router.replace({name:'AllTasks'});
            break;
        case 3:
					router.replace({name:'MineIndex'});
            break;
        default:
            break;
    }
}
</script>

<style scoped>

</style>